<template>
  <CollapsibleSection
    title="评价模块"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >
    <view class="space-y-[32rpx]">
      <!-- 监护人评价 -->
      <view class="evaluation-section">
        <view class="section-header">
          <view class="section-indicator bg-gradient-to-r from-blue-500 to-blue-600"></view>
          <text class="section-title">监护人评价</text>
        </view>
        
        <ItemListManager
          :items="formData.guardianEvaluations || []"
          item-title="监护人评价项目"
          add-button-text="添加监护人评价"
          add-button-color="#3b82f6"
          @add="addGuardianEvaluation"
          @remove="removeGuardianEvaluation"
          @update="updateGuardianEvaluation"
        >
          <template #default="{ item, index }">
            <view class="evaluation-card guardian-card">
              <!-- 评价内容 -->
              <view class="field-group">
                <text class="field-label">评价内容</text>
                <view class="input-container">
                  <nut-textarea 
                    v-model="item.content" 
                    placeholder="请输入评价内容"
                    :rows="4"
                    class="custom-textarea"
                  />
                </view>
              </view>
              
              <!-- 客户满意度调查 -->
              <view class="field-group">
                <text class="field-label">客户满意度调查</text>
                <view class="rating-section">
                  <view class="rating-header">
                    <text class="satisfaction-label">满意度评分</text>
                    <text class="rating-display">{{ item.satisfaction || 0 }}/5</text>
                  </view>
                  <view class="stars-container">
                    <text class="rating-label-left">不满意</text>
                    <nut-rate 
                      v-model="item.satisfaction" 
                      :count="5"
                      size="18"
                      color="#fbbf24"
                      spacing="4"
                      void-color="#e5e7eb"
                      @change="(value) => updateSatisfaction(index, value)"
                    />
                    <text class="rating-label-right">非常满意</text>
                  </view>
                </view>
              </view>
              
              <!-- 详细评价 -->
              <view class="field-group">
                <ItemWithImagesCard
                  :model-value="item.details"
                  @update:model-value="(data) => updateEvaluationDetails(index, data)"
                  :show-title="true"
                  title-label="详细评价"
                  title-placeholder="请输入详细评价内容"
                  description-label="补充说明"
                  description-placeholder="请输入补充说明"
                  :description-rows="3"
                  border-color="border-blue-100"
                  :max-images="9"
                />
              </view>
            </view>
          </template>
        </ItemListManager>
      </view>

      <!-- 服务人员评价 -->
      <view class="evaluation-section">
        <view class="section-header">
          <view class="section-indicator bg-gradient-to-r from-purple-500 to-purple-600"></view>
          <text class="section-title">服务人员评价</text>
        </view>
        
        <ItemListManager
          :items="formData.staffEvaluations || []"
          item-title="服务人员评价项目"
          add-button-text="添加服务人员评价"
          add-button-color="#8b5cf6"
          @add="addStaffEvaluation"
          @remove="removeStaffEvaluation"
          @update="updateStaffEvaluation"
        >
          <template #default="{ item, index, update }">
            <view class="evaluation-card staff-card">
              <ItemWithImagesCard
                :model-value="item"
                @update:model-value="(data) => update(index, data)"
                :show-title="true"
                title-label="评价标题"
                title-placeholder="请输入评价标题"
                description-label="评价内容"
                description-placeholder="请输入服务人员评价内容"
                :description-rows="3"
                border-color="border-purple-100"
                :max-images="9"
              />
            </view>
          </template>
        </ItemListManager>
      </view>

      <!-- 服务机构评价 -->
      <view class="evaluation-section">
        <view class="section-header">
          <view class="section-indicator bg-gradient-to-r from-orange-500 to-orange-600"></view>
          <text class="section-title">服务机构评价</text>
        </view>
        
        <ItemListManager
          :items="formData.institutionEvaluations || []"
          item-title="服务机构评价项目"
          add-button-text="添加服务机构评价"
          add-button-color="#f97316"
          @add="addInstitutionEvaluation"
          @remove="removeInstitutionEvaluation"
          @update="updateInstitutionEvaluation"
        >
          <template #default="{ item, index, update }">
            <view class="evaluation-card institution-card">
              <ItemWithImagesCard
                :model-value="item"
                @update:model-value="(data) => update(index, data)"
                :show-title="true"
                title-label="评价标题"
                title-placeholder="请输入评价标题"
                description-label="评价内容"
                description-placeholder="请输入服务机构评价内容"
                :description-rows="3"
                border-color="border-orange-100"
                :max-images="9"
              />
            </view>
          </template>
        </ItemListManager>
      </view>
    </view>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { useItemManagement } from '@/composables/useItemManagement'
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import ItemListManager from '@/components/ItemListManager.vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const { 
  formData, 
  addGuardianEvaluation, 
  removeGuardianEvaluation, 
  updateGuardianEvaluation,
  updateGuardianEvaluationSatisfaction,
  updateGuardianEvaluationDetails,
  addStaffEvaluation,
  removeStaffEvaluation,
  updateStaffEvaluation,
  addInstitutionEvaluation,
  removeInstitutionEvaluation,
  updateInstitutionEvaluation
} = useItemManagement()

// 更新满意度评分
const updateSatisfaction = (index: number, rating: number) => {
  updateGuardianEvaluationSatisfaction(index, rating)
}

// 更新评价详情
const updateEvaluationDetails = (index: number, data: any) => {
  updateGuardianEvaluationDetails(index, data)
}
</script>

<style scoped lang="scss">
// 评价模块手机端优化样式
.evaluation-section {
  margin-bottom: 32rpx;
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-indicator {
      width: 6rpx;
      height: 32rpx;
      border-radius: 3rpx;
      margin-right: 16rpx;
      background: linear-gradient(135deg, var(--tw-gradient-stops));
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    }
    
    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #111827;
      letter-spacing: 0.025em;
      text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
    }
  }
}

.evaluation-card {
  background-color: white;
  border-radius: 20rpx;
  border: 1px solid #e5e7eb;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3rpx;
    background: linear-gradient(90deg, var(--card-gradient));
  }
  
  &:active {
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    transform: translateY(-2rpx);
  }
  
  // 不同类型的卡片样式 - 手机端优化
  &.guardian-card {
    --card-gradient: #3b82f6, #60a5fa, #93c5fd;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
    border-left: 6rpx solid #3b82f6;
  }
  
  &.staff-card {
    --card-gradient: #8b5cf6, #a78bfa, #c4b5fd;
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
    border-left: 6rpx solid #8b5cf6;
  }
  
  &.institution-card {
    --card-gradient: #f97316, #fb923c, #fdba74;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border-left: 6rpx solid #f97316;
  }
}

.field-group {
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .field-label {
    font-size: 28rpx;
    font-weight: bold;
    color: #1f2937;
    display: block;
    margin-bottom: 16rpx;
    letter-spacing: 0.5rpx;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
  }
  
  .input-container {
    position: relative;
    
    .custom-textarea {
      width: 100%;
      background-color: white;
      border: 2px solid #e5e7eb;
      border-radius: 12rpx;
      padding: 24rpx 28rpx;
      font-size: 30rpx;
      line-height: 1.6;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      min-height: 120rpx;
      box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
      
      &:focus {
        border-color: #3b82f6;
        background-color: #eff6ff;
        box-shadow: 0 0 0 3rpx rgba(59, 130, 246, 0.15), inset 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
        transform: translateY(-1rpx);
      }
      
      &::placeholder {
        color: #9ca3af;
        font-size: 28rpx;
      }
    }
  }
}

// 手机端优化的评分区域
.rating-section {
  background: linear-gradient(to right, #f9fafb, white);
  border-radius: 16rpx;
  padding: 24rpx;
  border: 1px solid #f3f4f6;
  box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
  
  .rating-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .satisfaction-label {
      font-size: 26rpx;
      font-weight: bold;
      color: #374151;
      letter-spacing: 0.5rpx;
    }
    
    .rating-display {
      font-size: 28rpx;
      font-weight: bold;
      color: #999;
      // background-color: #dbeafe;
      // border-radius: 8rpx;
      padding: 8rpx 16rpx;
      // box-shadow: 0 1rpx 4rpx rgba(59, 130, 246, 0.2);
    }
  }
  
  .stars-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8rpx;
   padding: 16rpx;
  }
  
  
  .rating-label-left,
  .rating-label-right {
    font-size: 28rpx;
    font-weight: 500;
    text-wrap: nowrap;
  }
  
  .rating-label-left {
    color: #ef4444;
  }
  
  .rating-label-right {
    color: #10b981;
  }

}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  .evaluation-card {
    background-color: #1f2937;
    border-color: #374151;
    
    &.guardian-card {
      --card-gradient: #3b82f6, #60a5fa, #93c5fd;
      background: linear-gradient(135deg, #1e3a8a 0%, #1f2937 100%);
    }
    
    &.staff-card {
      --card-gradient: #8b5cf6, #a78bfa, #c4b5fd;
      background: linear-gradient(135deg, #581c87 0%, #1f2937 100%);
    }
    
    &.institution-card {
      --card-gradient: #f97316, #fb923c, #fdba74;
      background: linear-gradient(135deg, #ea580c 0%, #1f2937 100%);
    }
  }
  
  .section-title {
    color: #f3f4f6;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
  }
  
  .field-label {
    color: #e5e7eb;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
  }
  
  .custom-textarea {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
    padding: 32rpx 36rpx;
    font-size: 34rpx;
    box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
    
    &:focus {
      border-color: #60a5fa;
      background-color: #4b5563;
      box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.2), inset 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
    }
    
    &::placeholder {
      color: #9ca3af;
      font-size: 32rpx;
    }
  }
  
  .rating-section {
    background: linear-gradient(to right, #374151, #1f2937);
    border-color: #4b5563;
    box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    
    .satisfaction-label {
      color: #d1d5db;
      font-size: 30rpx;
    }
    
    .rating-display {
      color: #60a5fa;
      background-color: #1e3a8a;
      font-size: 36rpx;
      box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
    }
    
    :deep(.nut-rate) {
      background: rgba(0, 0, 0, 0.2);
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
    }
    
    .rating-label-left,
    .rating-label-right {
      color: #9ca3af;
      font-size: 26rpx;
    }
    
    .rating-label-left {
      color: #f87171;
    }
    
    .rating-label-right {
      color: #34d399;
    }
  }
}

// 手机端响应式设计优化
@media (max-width: 750rpx) {
  .evaluation-card {
    padding: 20rpx;
    border-radius: 16rpx;
  }
  
  .section-title {
    font-size: 26rpx;
  }
  
  .field-label {
    font-size: 26rpx;
  }
  
  .custom-textarea {
    font-size: 28rpx;
    padding: 20rpx 24rpx;
    min-height: 100rpx;
  }
  
  .rating-section {
    padding: 20rpx;
    
    .satisfaction-label {
      font-size: 24rpx;
    }
    
    .rating-display {
      font-size: 26rpx;
    }
    
    .rating-labels {
      .rating-label-left,
      .rating-label-right {
        font-size: 20rpx;
      }
    }
    
    :deep(.nut-rate) {
      padding: 12rpx;
      gap: 6rpx;
    }
  }
}

// 动画效果
.evaluation-card {
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rating-section {
  animation: slideInScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInScale {
  from {
    opacity: 0;
    transform: translateX(-20rpx) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
</style>
